<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Outliner Mode</title>
    <link rel="stylesheet" type="text/css" href="css/outliner.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.8.4.custom.css" media="screen" />
    <script type="text/javascript" src="scripts/jquery-1.4.2.min.js" ></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.8.4.custom.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.layout.min-1.2.0.js"></script>
    <script type="text/javascript" src="scripts/shortcuts.js"></script>
    <script type="text/javascript" src="scripts/jquery.qtip-1.0.0-rc3.min.js"></script>

    <script type="text/javascript">

        $(function() {




            //auto save on close
            var saved = false;
            $(window).bind('unload', function() {
                //if(!confirm("Please save page")) {
                //    return false;
                //}
            });

            // set the layout manager
            $('body').layout({
                applyDefaultStyles: true,
                enableCursorHotkey: false
            });

            /**
             * Agenda 
             */
            var selectedAgendaLasBGColor;
            $("#agenda span.agendaItem").hover(
                function() {
                    selectedAgendaLasBGColor = $(this).css('background-color');
                    $(this).css('background-color', 'green');
                    var uuid = $(this).attr('id');
                    $('.' + uuid).css('background-color', 'green');

                }, function() {
                    $(this).css('background-color', selectedAgendaLasBGColor);
                    var uuid = $(this).attr('id');
                    $('.' + uuid).css('background-color', 'white');
                }
            ).click(function() {
                 $('.currentAgenda').removeClass("currentAgenda");
                 appendNote($(this).text(), false);
                 selectedAgendaLasBGColor = 'yellow';
                 $(this).addClass("currentAgenda");
            });

            /**************************************************************
             Indent buttons
             **************************************************************/
            shortcut.add('alt+shift+left', lessIndentCurrent);
            shortcut.add('alt+shift+right', moreIndentCurrent);
            $('#lessIndent').live('click', function() {
                lessIndentCurrent();

            });
            $('#moreIndent').live('click', function() {
                moreIndentCurrent();

            });
            $('#currentForm').live('submit', function() {
                //console.log($("#entry").val());
                appendNote($("#entry").val(), true);
                $("#entry").val('').focus();
                return false;
            })


            /*********************************************************************
             * Bind attendee buttons
             */


            $(".attendee").each(function(i, item){
                var index = i + 1;
                var keycombo = 'alt+' + index;
                 shortcut.add(keycombo, function() {
                    attendeeTalking($('.attendee-' + index));
                });
            }).click(function(){attendeeTalking($(this))});


            /**
             * Record Button
             */
            $('#recordButton').button().click(function(){
               if($(this).attr('checked') ) {
                    $.post('/json/record/start', {'id' : '1234'}, recordingStatusChanged, 'json');
               } else {
                   $.post('/json/record/stop', {}, recordingStatusChanged, 'json');
               }
            });
        });

        function recordingStatusChanged(data, status) {
            console.log('post returend ');
            console.dir(data);
        }

        function attendeeTalking(attendeeDiv){
            var topic_id = attendeeDiv.attr('title');
            var name = attendeeDiv.find('p').text();
            var when = new Date();
            var current = $('.current');
            var parent = current.parent();
            var newNote = $('<li><span class="talk">' + name + ' is talking.</span></li>');
            $('.current').replaceWith(newNote);
            //newNote.fadeIn(1500);
            newNote.effect("highlight", {}, 3000);
            parent.append(current);
            $("#entry").focus();
            var item = newNote.children('.talk');
            item.data('info', {date: when, who: topic_id});
            item.qtip({
                content: {
                    text: item.data('info').date + 'daddas'
                },
                style: {
                    name: 'cream',
                    tip: true,
                    border: {
                        width:5,
                        radius: 10
                    }
                },
                 position: {
                      corner: {
                         target: 'topLeft',
                         tooltip: 'bottomLeft'
                      }
                   }
            });
        }


        function highlightAttendee(number) {
            $('.attendee-' + number).effect("highlight", {}, 500);
        }

        function lessIndentCurrent() {
            var current = $('.current');
            var oneUpUL = current.parent().parent();
            current.appendTo(oneUpUL);
            $("#entry").focus();
        }
        function moreIndentCurrent() {
            var current = $('.current');
            var prev = current.prev();
            var ul;
            if (prev.children('ul').size() > 0 && prev.children('ul').children('li').size() > 0) {
                ul = prev.children('ul');
            } else {
                var ul = $('<ul></ul>');
                prev.append(ul);
            }
            current.appendTo(ul);
            $("#entry").focus();
        }
        function appendNote(note, clearEntry) {
            var when = new Date();
            var current = $('.current');
            var parent = current.parent();
            var newNote = $('<li><span class="item">' + note + '</span></li>');
            $('.current').replaceWith(newNote);
            //newNote.fadeIn(1500);
            newNote.effect("highlight", {}, 3000);
            parent.append(current);
            $("#entry").focus();
            var item = newNote.children('.item');
            item.data('info', {date: when});
            item.qtip({
                content: {
                    text: item.data('info').date + 'daddas'
                },
                style: {
                    name: 'cream',
                    tip: true,
                    border: {
                        width:5,
                        radius: 10
                    }
                },
                 position: {
                      corner: {
                         target: 'topLeft',
                         tooltip: 'bottomLeft'
                      }
                   }
            });
        }

        function getCurrentLevel() {
            var current = $('.current');
            var level = 0;
            var found = false;
            var parent =  current.parent();
            while (!found) {

                if (parent.hasClass('root')) return level;
                else {
                    level++;
                    parent = parent.parent().parent();
                    //console.dir(parent);
                }
                if (level > 20 ) return "not found";
            }
        }

    </script>

</head>
<body>
    <div class="ui-layout-north">

        <div id="subInfo">
            <div id="dateTime">12 August 2010, 10:02am</div>
            <div id="duration">00:23:01</div>
        </div>
        <div id="recordDiv">
            <input type="checkbox" id="recordButton" /><label for="recordButton">Record</label>
        </div>
        <div id="mainTopic">Meeting With Randy</div>
    </div>
    <div id="agenda" class="ui-layout-west">
        <div class="ui-widget-header">Agenda</div>
        <div class="ui-widget-context">
            <ul>
               <li ><span id="uuid-123" class="agendaItem">Review <span class="topic">Action Items</span></span>
                   <ul>
                       <li><span id="uuid-124" class="agendaItem">Bob to get stuff</span></li>
                       <li><span id="uuid-125" class="agendaItem">Steve to get stuff</span></li>
                   </ul>
                </li>
                <li><span id="uuid-126" class="agendaItem currentAgenda">Review <span class="topic">Corporate Structure</span></span></li>
                <li><span id="uuid-127" class="agendaItem">Finalize <span class="topic">Investor List</span></span></li>
            </ul>
        </div>
        <div class="ui-widget-header">Quick Add</div>
        <div class="ui-widget-context">
             <div class="quickAdd" title="Idea">
                <img src="pics/idea-flow.png" alt="Idea" title="Idea"/>
                <p>Idea</p>
            </div>
            <div class="quickAdd" title="Reminder">
                <img src="pics/reminder-flow.png" alt="Reminder" title="Reminder"/>
                <p>Reminder</p>
            </div>
        </div>



    </div>
    <div class="ui-layout-east">
        <div class="ui-widget-header">Attendees</div>
        <div id="attendees">

            <div class="attendee attendee-1" title="Ryan_Ramage">
                <img src="people/ryan.jpg" alt="Ryan Ramage" title="Ryan Ramage"/>
                <p>Ryan Ramage</p>
            </div>
            <div class="attendee attendee-2" title="Richard_Bayly">
                <img src="people/rich.jpg" alt="Richard Bayly" title="Richard Bayly"/>
                <p>Richard Bayly</p>
            </div>
            <div class="attendee attendee-3" title="Randy_Simpson">
                <img src="people/anon.jpg" alt="Randy Simpson" title="Randy Simpson"/>
                <p>Randy Simpson</p>
            </div>


        </div>
    </div>
    <div class="ui-layout-center">
        <h2>Notes</h2>
        <div id="tree">
            <ul class="root">
               <li class="current">
                    <div id="currentLevel">
                        <img id="lessIndent" src="images/text_indent_remove.png" alt="Less Indent" title="Less Indent">
                        <img id="moreIndent" src="images/text_indent.png" alt="More Indent" title="More Indent">
                    </div>
                    <form id="currentForm">
                        <input type="text" id="entry" name="entry" />
                    </form>
                </li>
            </ul>
        </div>
    </div>


</body>
</html>